<template>
	<view class="order-container " :class="themeStyle">
		<scroll-view id="tab-bar" class="order-nav" :scroll-x="true" :show-scrollbar="false" :scroll-into-view="scrollInto">
			<view v-for="(statusItem, statusIndex) in statusList" :key="statusIndex" class="uni-tab-item" :id="statusItem.id"
			 :data-current="statusIndex" @click="ontabtap">
				<text class="uni-tab-item-title" :class="statusItem.status == orderStatus ? 'uni-tab-item-title-active ns-border-color ns-text-color' : ''">{{ statusItem.name }}</text>
			</view>
		</scroll-view>

		<mescroll-uni ref="mescroll" @getData="getListData" top="90rpx">
			<block slot="list">
				<view class="order-list" v-if="orderList.length > 0">
					<view class="order-item" v-for="(orderItem, orderIndex) in orderList" :key="orderIndex">
						<view class="order-header" :class="{ waitpay: (orderStatus == 'waitpay' && orderItem.order_status == 0) }">
							<view class="iconfont" :class="$util.inArray(orderItem.order_id, mergePayOrder) == -1 ? 'iconyuan_checkbox' : 'iconyuan_checked ns-text-color'"
							 v-if="orderStatus == 'waitpay' && orderItem.order_status == 0"></view>
							<view class="iconfont icondianpu" ></view>
							<text class="site-name" >{{ orderItem.site_name }}</text>
							<view class="iconfont iconright" ></view>
							<text class="status-name ns-text-color">{{ orderItem.order_status_name }}</text>
						</view>
						<view class="order-body" >
							<view class="goods-wrap" v-for="(goodsItem, goodsIndex) in orderItem.order_goods" :key="goodsIndex">
								<view class="goods-img">
									<image :src="$util.img(goodsItem.sku_image.split(',')[0], { size: $util.goodsImgType('mid',goodsItem.source) })" @error="imageError(orderIndex,goodsIndex)" mode="aspectFill"
									 :lazy-load="true"></image>
								</view>
								<view class="goods-info">
									<view class="goods-name">{{ goodsItem.sku_name }}</view>
									<view class="goods-sub-section">
										<view>
											<text class="goods-price ns-text-color">
												<text class="unit">{{ $lang('common.currencySymbol') }}</text>
												<text>{{ goodsItem.price }}</text>
											</text>
										</view>
										<view>
											<text>
												<text class="iconfont iconclose"></text>
												{{ goodsItem.num }}
											</text>
										</view>
									</view>
									<text class="tip" v-if="goodsItem.is_present">赠品</text>
									<view class="goods-operation">
									</view>
								</view>
							</view>
						</view>
						<view class="order-footer">
							<view class="order-base-info">
								<view class="order-type">
									<text class="ns-text-color">{{orderItem.name}}</text>
								</view>
								<view class="total">
									<text>共{{ orderItem.goods_num }}件商品</text>
								</view>
							</view>
							<text class="flex-end">
								总额：
								<text class="ns-font-size-sm">{{ $lang('common.currencySymbol') }}</text>
								{{ orderItem.order_money }}
							</text>
							<text class="flex-end">
								获利：
								<text class="ns-font-size-sm">{{ $lang('common.currencySymbol') }}</text>
								{{ orderItem.pintuan_trader_commission_money }}
							</text>
						</view>
						
					</view>
				</view>
				<view v-else>
					<ns-empty :isIndex="!1" :text="text"></ns-empty>
				</view>
			</block>
		</mescroll-uni>

		<!-- <view class="order-batch-operation bottom-safe-area" v-if="mergePayOrder.length">
			<view class="operation-btn ns-text-color ns-border-color" @click="mergePay">合并付款</view>
		</view> -->

		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
	import orderMethod from './orderMethod.js';

	export default {
		data() {
			return {
				scrollInto: '',
				orderStatus: 'all',
				statusList: [],
				orderList: [],
				contentText: {},
				mergePayOrder: [],
				text:'暂无相关订单'
			};
		},
		mixins: [orderMethod],
		onLoad(option) {
			if (option.status) this.orderStatus = option.status;
		},
		onShow() {
			// 刷新多语言
			this.$langConfig.refresh();
			this.getOrderStatus();

			if (uni.getStorageSync('token')) {
				if (this.$refs.mescroll) this.$refs.mescroll.refresh();
			} else {
				this.$util.redirectTo('/pages/login/login/login', {
					back: '/promotionpages/order/list/list?status=' + this.orderStatus
				});
			}
		},
		methods: {
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.orderStatus = this.statusList[index].status;
				if(this.orderStatus == 'all' ){
					this.text = '暂无相关订单'
				}else if(this.orderStatus == 'waitpay' ){
					this.text = '暂无待付款订单'
				}else if(this.orderStatus == 'waitsend' ){
					this.text = '暂无待发货订单'
				}else if(this.orderStatus == 'waitconfirm' ){
					this.text = '暂无待收货订单'
				}else{
					this.text = '暂无待评价订单'
				}
				if (this.orderStatus == '') this.mergePayOrder = [];
				this.$refs.loadingCover.show();
				this.$refs.mescroll.refresh();
			},
			getListData(mescroll) {
				this.$api.sendRequest({
					url: '/platformpintuan/api/pintuanbidding/orderpage',
					data: {
						page: mescroll.num,
						page_size: mescroll.size,
						order_status: this.orderStatus
					},
					success: res => {
						if(res.code==-1&&res.error_code=='TOKEN_ERROR'){
							this.$util.showToast({'title':'登录失败'});
							let pageRouter=getCurrentPages();
							let data=pageRouter[pageRouter.length-1].options;
							let back=pageRouter[pageRouter.length-1].route;
							data.back=back;
							setTimeout(()=>{
								this.$util.redirectTo('/pages/login/login/login', data);
							},1500)
							return;
						}
						let newArr = []
						let msg = res.message;
						if (res.code == 0 && res.data) {
							newArr = res.data.list;
						} else {
							this.$util.showToast({
								title: msg
							})
						}
						mescroll.endSuccess(newArr.length);
						//设置列表数据
						if (mescroll.num == 1) this.orderList = []; //如果是第一页需手动制空列表
						this.orderList = this.orderList.concat(newArr); //追加新数据
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
				
					},
					fail: res => {
						mescroll.endErr();
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			/**
			 * 获取订单状态
			 */
			getOrderStatus() {
				this.statusList = [{
						status: 'all',
						// name: this.$lang('all'),
						name: '全部',
						id: 'status_0'
					},
					{
						status: 'waitpay',
						// name: this.$lang('waitPay'),
						name: '待付款',
						id: 'status_1'
					},
					{
						status: 'waitsend',
						name: '待发货',
						id: 'status_2'
					},
					{
						status: 'waitconfirm',
						// name: this.$lang('waitDelivery'),
						name: '待收货',
						id: 'status_3'
					},
					{
						status: 'waitrate',
						// name: this.$lang('waitEvaluate'),
						name: '已完成',
						id: 'status_4'
					}
				];
			},
			operation(action, orderData) {
				let index = this.status;
				switch (action) {
					case 'orderPay': // 支付
						this.orderPay(orderData);
						break;
					case 'orderClose': //关闭
						this.orderClose(orderData.order_id, () => {
							this.$refs.mescroll.refresh();
						});
						break;
					case 'memberTakeDelivery': //收货
						this.orderDelivery(orderData.order_id, () => {
							this.$refs.mescroll.refresh();
						});
						break;
					case 'trace': //查看物流
						this.$util.redirectTo('/promotionpages/order/logistics/logistics', {
							order_id: orderData.order_id
						});
						break;
					case 'memberOrderEvaluation': //评价
						this.$util.redirectTo('/otherpages/order/evaluate/evaluate', {
							order_id: orderData.order_id
						});
						break;
					case 'extendTakeDelivery': //延长收回
						
						this.orderExtendTakeDelivery(orderData.order_id, () => {
							this.$refs.mescroll.refresh();
						});
						break;
					
				}
			},
			
			
			imageError(orderIndex, goodsIndex) {
				this.orderList[orderIndex].order_goods[goodsIndex].sku_image = this.$util.getDefaultImage().default_goods_img;
				this.$forceUpdate();
			},
			
		},
		computed: {
			mpOrderList() {
				if (!this.orderList[this.status]) return;
				return this.orderList[this.status].list || [];
			},
			//vueX页面主题
			themeStyle() {
				return 'theme-' + this.$store.state.themeStyle
			}
		}
	};
</script>

<style lang="scss">
	@import './list.scss';
</style>
<style scoped>
	/deep/ .uni-page {
		overflow: hidden;
	}

	/deep/ .mescroll-upwarp {
		padding-bottom: 100rpx;
	}
	.order-container{
		padding-top:1px;
		
	}
	.flex-end{
		    display: flex;
		    justify-content: flex-end;
	}
</style>
